﻿@page "/layouts"

<h3>@LayoutsLocalizer["Title"]</h3>

<h4>@LayoutsLocalizer["H1"]</h4>

<p>
    <code>Container</code>：@((MarkupString)LayoutsLocalizer["Code1"].Value)<br />
    <code>Header</code>：@LayoutsLocalizer["Code2"]<br />
    <code>Side</code>：@LayoutsLocalizer["Code3"]<br />
    <code>Main</code>：@LayoutsLocalizer["Code4"]<br />
    <code>Footer</code>：@LayoutsLocalizer["Code5"]
</p>

<h4>@LayoutsLocalizer["H2"]</h4>
<p>
    <code>Layout</code>：@((MarkupString)LayoutsLocalizer["Code6"].Value)<br />
    <code>Header</code>：@LayoutsLocalizer["Code7"]<br />
    <code>Sider</code>：@LayoutsLocalizer["Code8"]<br />
    <code>Main</code>：@LayoutsLocalizer["Code9"]<br />
    <code>Footer</code>：@LayoutsLocalizer["Code10"]
</p>

<Tips>
    <p>
       @((MarkupString)LayoutsLocalizer["P1"].Value)
    </p>

    <b>@LayoutsLocalizer["b1"]</b>

    <p>@((MarkupString)LayoutsLocalizer["P2"].Value)</p>
</Tips>

<h4>@LayoutsLocalizer["H3"]</h4>

<Block Title="@LayoutsLocalizer["Block1Title"]" Introduction="@LayoutsLocalizer["Block1Intro"]">
    <Layout ShowFooter="true">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
        <Main>
            <div class="text-center main">Main</div>
        </Main>
        <Footer>
            <div class="text-center footer">Footer</div>
        </Footer>
    </Layout>
</Block>

<Block Title="@LayoutsLocalizer["Block2Title"]" Introduction="@LayoutsLocalizer["Block2Intro"]">
    <Layout ShowFooter="true">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
        <Side>
            <div class="text-center side">Side</div>
        </Side>
        <Main>
            <div class="text-center main">Main</div>
        </Main>
        <Footer>
            <div class="text-center footer">Footer</div>
        </Footer>
    </Layout>
</Block>

<Block Title="@LayoutsLocalizer["Block3title"]" Introduction="@LayoutsLocalizer["Block3Intro"]">
    <Layout ShowFooter="true" IsFullSide="true">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
        <Side>
            <div class="text-center side">Side</div>
        </Side>
        <Main>
            <div class="text-center main">Main</div>
        </Main>
        <Footer>
            <div class="text-center footer">Footer</div>
        </Footer>
    </Layout>
</Block>

<Block Title="@LayoutsLocalizer["Block4Title"]" Introduction="@LayoutsLocalizer["Block4Intro"]">
    <Layout ShowFooter="true" SideWidth="200">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
        <Side>
            <div class="text-center side">Side</div>
        </Side>
        <Main>
            <div class="text-center main">Main</div>
        </Main>
        <Footer>
            <div class="text-center footer">Footer</div>
        </Footer>
    </Layout>
</Block>

<Block Title="@LayoutsLocalizer["Block5Title"]">
    <div>@LayoutsLocalizer["D1"]</div>
    <ul class="mt-2">
        <li>
            <div>@LayoutsLocalizer["D2"]</div>
        </li>
        <li>
            <div>@LayoutsLocalizer["D3"]</div>
        </li>
    </ul>
    <div>@LayoutsLocalizer["D4"]</div>
    <p>
       @((MarkupString)LayoutsLocalizer["P3"].Value) 
    </p>
    <p>
        @LayoutsLocalizer["P4"]
    </p>
    <Tips>
        @((MarkupString)LayoutsLocalizer["Tips1"].Value)
    </Tips>
    <div style="width: 100%; height: 300px; border: 1px solid rgba(0,0,0,.125);">
        <Layout ShowFooter="true" SideWidth="160px">
            <Header>
                <div class="d-flex justify-content-center align-items-center" style="height: 50px; color: #fff; margin: 0 -1px;">Header</div>
            </Header>
            <Side>
                <div style="position: absolute; top: 0; left:0; right: 0; bottom: 0; overflow: auto; border-right: 1px solid rgba(0,0,0,.125); padding: 6px 0;">
                    <Menu Items="@IconSideMenuItems" DisableNavigation="true" IsVertical="true"></Menu>
                </div>
            </Side>
            <Main>
                <div style="padding: 1rem;">Main</div>
            </Main>
            <Footer>
                <div class="d-flex justify-content-center align-items-center" style="height: 30px; color: #fff; background-color: #5b6e84; margin: 0 -1px;">Footer</div>
            </Footer>
        </Layout>
    </div>
    <p class="mt-3">
        @LayoutsLocalizer["P5"]
    </p>
    <div style="width: 100%; border: 1px solid rgba(0,0,0,.125);">
        <Layout ShowFooter="true" SideWidth="160px">
            <Header>
                <div class="d-flex justify-content-center align-items-center" style="height: 50px; color: #fff; margin: 0 -1px;">Header</div>
            </Header>
            <Side>
                <div style="border-right: 1px solid rgba(0,0,0,.125); padding: 6px 0;">
                    <Menu Items="@IconSideMenuItems" DisableNavigation="true" IsVertical="true"></Menu>
                </div>
            </Side>
            <Main>
                <div style="padding: 1rem;">Main</div>
            </Main>
            <Footer>
                <div class="d-flex justify-content-center align-items-center" style="height: 30px; color: #fff; background-color: #5b6e84; margin: 0 -1px;">Footer</div>
            </Footer>
        </Layout>
    </div>
    <p class="mt-3">
       @((MarkupString)LayoutsLocalizer["P6"].Value)
    </p>
</Block>

<Block Title="@LayoutsLocalizer["Block6Title"]" Introduction="">
    <Tips>@((MarkupString)LayoutsLocalizer["Tips2"].Value)</Tips>

    <ul class="page-layout-demo-list">
        <li><a href="layout-page" target="_blank">@LayoutsLocalizer["Li"]</a></li>
    </ul>
</Block>

<AttributeTable Items="@GetAttributes()" />
